<template>
  <div class="search" >
    <div class="tabbar">
      <i class="back icon icon-back" @click="$router.go(-1)"></i>
      <div class="searchBar">
          <i class="icon icon-search"></i>
          <input class="searchInner" :placeholder="placeholder" type="text" v-model="searchName">
      </div>
      <div @click="search" class="searchBtn">搜索</div>
      </div>
      <!-- 搜索记录 -->
      <SearchHistory/>
      <!-- 搜索结果列表 -->
      <SearchList/>
  </div>
</template>

<script>
import SearchList from './searchList'
import SearchHistory from './saerchHistory'
export default {
  name: 'Search',
  components:{ SearchList, SearchHistory },
  data () {
    return {
      placeholder: this.$route.query.recommend,
      searchKey: this.$route.params.searchKey
    }
  },
  mounted (){
    if (this.searchKey) this.$store.dispatch('searchBook', this.searchKey)
  },
  methods: {
    search () {
      this.$store.dispatch('searchBook', this.searchName)
      this.$store.commit('HISTORY', this.searchName)
    }
  },
  computed: {

    searchName: {
      get (){ return this.$store.state.novel.searchName },
      set (newVal){
        this.$store.commit('SEARCHNAME', newVal)
      }
    }
  }

}
</script>

<style lang="less" scoped>
.search{
    max-width: var(--base-width);
    position: fixed;
    min-height: 100vh;
    left: 0;
    top: 0;
    right: 0;
    max-width: var(--base-width);
    margin: 0 auto;
    height: 50px;
    background-color: var(--main-bg);

    .tabbar{
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 50px;
    }
    .back{
      width: 10%;
      font-size: 1.5em;
      text-align: center;
    }
    .searchBar{
        line-height: 50px;
        flex:1;
        border-radius:20px ;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background-color: var(--main-darken-bg);
        .icon{
            margin-left: 15px;
            font-size: 15px;
            height: 30px;
            line-height: 30px;
            width: 10%;
        }
        .searchInner{
            width: 70%;
            height: 100%;
            font-size: 1em;
            letter-spacing: 1px;
            color: var(--icon-color);
        }
    }
    .searchBtn{
      width: 15%;
      text-align: center;
    }
}
</style>
